<template>
  <div>
    <div class="bottom flex-between-start">
      <div class="top zone-wrap">
        <div class="title-con flex-center-start">
          <div class="icon"></div>
          <div class="title">账号信息</div>
        </div>
        <div class="data-wrap flex-center-start">
          <!-- <div class="data-con flex-center-column">
            <div class="phone flex-center">
              <div class="tit">电 &nbsp; &nbsp; &nbsp; &nbsp; 话</div>
              <div class="text">{{ socialInfo.phone }}</div>
            </div>
            <div class="email flex-center">
              <div class="tit">邮&nbsp; &nbsp; &nbsp; &nbsp;箱</div>
              <div class="text">{{ socialInfo.email }}</div>
            </div>
          </div> -->
          <div
            v-for="(item, index) in socialInfo.numbers"
            :key="item + index"
            class="flex-center"
          >
            <!-- <div class="line"></div> -->
            <div class="data-con">
              <div class="account flex-center">
                <div
                  v-show="item.acountName == 'TWITTER'"
                  class="logo logo-twitter"
                ></div>
                <div
                  v-show="item.acountName == 'FACEBOOK'"
                  class="logo logo-faceboox"
                ></div>
                <div>
                  <div class="flex">
                    <!-- 社交平台 -->
                    <p class="tit">社交<span></span></p>
                    <span>{{ acountNameFun(item.acountName) }}</span>
                  </div>
                  <div class="flex">
                    <p class="tit">账号<span></span></p>
                    <span>{{ item.accout }}</span>
                  </div>
                  <div class="flex">
                    <p class="tit">昵称<span></span></p>
                    <span>{{ item.nickName }}</span>
                  </div>
                </div>
              </div>
              <div class="numbers">
                <div class="bot flex-center-start">
                  <div class="son flex-center">
                    <!-- 发帖数 -->
                    <img src="@/assets/society/comment.png" alt="" />
                    <!-- <div class="icon icon1"></div> -->
                    <div class="num">{{ item.publishNum }}</div>
                  </div>
                  <div class="son flex-center">
                    <!-- 粉丝数 -->
                    <!-- <div class="icon icon2"></div> -->
                    <img src="@/assets/society/forword.png" alt="" />
                    <div class="num">{{ item.fansNum }}</div>
                  </div>
                  <div class="son flex-center">
                    <!-- 关注数 -->
                    <!-- <div class="icon icon3"></div> -->
                    <img src="@/assets/society/praise.png" alt="" />
                    <div class="num">{{ item.followNum }}</div>
                  </div>
                  <div class="son flex-center">
                    <!-- 收藏数 -->
                    <!-- <div class="icon icon4"></div> -->
                    <!-- <img src="@/assets/society/watch-icon.png" alt="" /> -->
                    <img class="collect_img" src="@/assets/society/collect.svg" alt="" />
                    <div class="num">{{ item.collectNum }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="lef zone-wrap box_list">
        <div class="title-con flex-between">
          <div class="flex-center">
            <div class="icon"></div>
            <div class="title">社交动态</div>
          </div>
          <!-- <div class="search-wrap flex-center">
            <input type="text" placeholder="请输入关键词" />
            <div class="btn flex-center">搜索</div>
          </div> -->
          <!-- <el-select v-model="value" placeholder="请选择" size="mini">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
        </div>
        <div class="news-con scroll_box">
          <div
            class="news-item"
            v-for="(item, index) in pageArr"
            :key="item + index"
            @click="toTalkDetail(item.id)"
          >
            <div class="top flex-center">
              <div class="logo logggggg">
                <img :src="'data:image/png;base64,' + item.image" alt="" />
              </div>
              <!-- <div class="logo" v-if="index == 0">
                <img src="../../assets/common/img (1).jpg" alt="" />
              </div>
              <div class="logo" v-if="index == 1">
                <img src="../../assets/common/img (2).jpg" alt="" />
              </div>
              <div class="logo" v-if="index == 2">
                <img src="../../assets/common/img (3).jpg" alt="" />
              </div>
              <div class="logo" v-if="index == 3">
                <img src="../../assets/common/img (4).jpg" alt="" />
              </div>
              <div class="logo" v-if="index == 4">
                <img src="../../assets/common/img (5).jpg" alt="" />
              </div>
              <div class="logo" v-if="index == 5">
                <img src="../../assets/common/img (10).jpg" alt="" />
              </div>
              <div class="logo" v-if="index == 6">
                <img src="../../assets/common/img (7).jpg" alt="" />
              </div>
              <div class="logo" v-if="index == 7">
                <img src="../../assets/common/img (9).jpg" alt="" />
              </div>
              <div class="logo" v-if="index == 8">
                <img src="../../assets/common/img (8).jpg" alt="" />
              </div>
              <div class="logo" v-if="index == 9">
                <img src="../../assets/common/img (10).jpg" alt="" />
              </div> -->
              <div class="news-body">
                <div class="news-text two-line-ellipsis">
                  {{ item.content }}
                </div>
                <div class="news-bottom">
                  <!-- <div class="from" @click.stop="clickFun">
                    <span>来自于</span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span class="link">{{ sourceFun(item.source) }}</span
                    >&nbsp;&nbsp;&nbsp;&nbsp;
                    <span class="time">{{ item.date }}</span
                    >&nbsp;&nbsp;&nbsp;&nbsp;
                  </div> -->
                  <div class="from">
                    <span>{{ item.date }}</span>
                  </div>
                  <div class="bot flex-center-start bot_box">
                    <div class="son flex-center">
                      <div class="icon icon3"></div>
                      <!-- 回复 -->
                      <div class="num">{{ item.replyNum }}</div>
                    </div>
                    <div class="line"></div>
                    <div class="son flex-center">
                      <div class="icon icon4"></div>
                      <!-- 转发 -->
                      <div class="num">{{ item.forwordNum }}</div>
                    </div>
                    <div class="line"></div>
                    <div class="son flex-center">
                      <div class="icon icon2"></div>
                      <!-- 点赞 -->
                      <div class="num">{{ item.likeNum }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分页器： -->
        <!-- 全功能： layout="total, sizes, prev, pager, next, jumper" -->
        <div class="page_box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="sPageSize"
            layout="total, prev, pager, next, jumper"
            :total="sTotal"
          >
          </el-pagination>
        </div>
      </div>
      <!-- <div class="rig zone-wrap">
        <div class="title-con flex-between">
          <div class="left">
            <div class="flex-center">
              <div class="icon"></div>
              <div class="title">社交活跃度</div>
            </div>
          </div>
          <div class="right flex-center">
            <div class="legends flex-center">
              <div
                class="legend flex-center"
                @click="changeChooseid(0)"
                :class="chooseid == 0 ? 'active' : ''"
              >
                今日
              </div>
              <div
                class="legend flex-center"
                @click="changeChooseid(1)"
                :class="chooseid == 1 ? 'active' : ''"
              >
                本周
              </div>
              <div
                class="legend flex-center"
                @click="changeChooseid(2)"
                :class="chooseid == 2 ? 'active' : ''"
              >
                本月
              </div>
              <div
                class="legend flex-center"
                @click="changeChooseid(3)"
                :class="chooseid == 3 ? 'active' : ''"
              >
                全年
              </div>
            </div>
            <el-date-picker
              size="mini"
              v-model="datePickerValue"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="sum-num flex-center-start">
          <div class="tit">累计发布数</div>
          <div class="desc">{{getSocialChartData.total}}</div>
        </div>
        <div class="chart-con" ref="chartCon"></div>
      </div> -->
    </div>
  </div>
</template>

<script>
// const echarts = require("echarts/lib/echarts");
// require("echarts/lib/chart/line");
// // 引入提示框和标题组件
// require("echarts/lib/component/tooltip");
// require("echarts/lib/component/title");
export default {
  props: {
    accounts: {
      // type: String,
      default: () => [
        {
          account: "我是一颗小虎牙",
          post: 243243,
          members: "342",
          supportNum: "342",
          commentNum: "342",
          links: 3434,
        },
        {
          account: "我是一颗小虎牙",
          post: 243243,
          members: "342",
          supportNum: "342",
          commentNum: "342",
          links: 3434,
        },
        {
          account: "我是一颗小虎牙",
          post: 243243,
          members: "342",
          supportNum: "342",
          commentNum: "342",
          links: 3434,
        },
      ],
    },
    // 社交动态数据
    socialInfo: {
      type: Object,
    },
    getSocialChartData: {
      type: Object,
    },
    SocialTalkData: {
      // type: Array,
    },
    // sPageSize: {
    //   // type: Array,
    // },
    sTotal: {},
    // mediaActivityChart: {
    //   type: Array,
    // },
  },
  data() {
    return {
      // 分页器选项:
      currentPage: 1, //起始页
      pageSizes: [5, 10, 50, 100], //分页选项(已隐藏)
      // aPageSize: 8, //默认选中的每页几个,
      // total: 0, //总个数
      sPageSize: 10,
      pageArr: [],
      // myChart: null,
      chooseid: 0,
      options: [
        {
          value: "选项1",
          label: "facebook",
        },
        {
          value: "选项5",
          label: "twitter",
        },
      ],
      value: "facebook",
      newsList: [
        {
          logo: require("@/assets/common/u55.png"),
          name: "B-1B",
          tags: [
            {
              value: "标签1",
              type: "1",
            },
            {
              value: "标签2",
              type: "2",
            },
          ],
          description:
            "【什么意图？台媒称美军两架B-1B战略轰炸机今现踪台湾东南海域，台军回应了】综合台媒与记录军事飞行器动态的社群媒体“飞机守望”（AircraftSpots）消息，美国空军两架B-1B枪骑兵战略轰炸机朝台湾东南海域方向飞行，并由空中加油机补给油料。台媒提到，",
          link: "环球网",
          time: "2020-10-01 18:00",
          starNum: "342",
          supportNum: "342",
          commentNum: "342",
        },
        {
          logo: require("@/assets/common/u55.png"),
          name: "B-1B",
          tags: [
            {
              value: "标签1",
              type: "1",
            },
            {
              value: "标签2",
              type: "2",
            },
          ],
          description:
            "【什么意图？台媒称美军两架B-1B战略轰炸机今现踪台湾东南海域，台军回应了】综合台媒与记录军事飞行器动态的社群媒体“飞机守望”（AircraftSpots）消息，美国空军两架B-1B枪骑兵战略轰炸机朝台湾东南海域方向飞行，并由空中加油机补给油料。台媒提到，",
          link: "环球网",
          time: "2020-10-01 18:00",
          starNum: "342",
          supportNum: "342",
          commentNum: "342",
        },
        {
          logo: require("@/assets/common/u55.png"),
          name: "B-1B",
          tags: [
            {
              value: "标签1",
              type: "1",
            },
            {
              value: "标签2",
              type: "2",
            },
          ],
          description:
            "【什么意图？台媒称美军两架B-1B战略轰炸机今现踪台湾东南海域，台军回应了】综合台媒与记录军事飞行器动态的社群媒体“飞机守望”（AircraftSpots）消息，美国空军两架B-1B枪骑兵战略轰炸机朝台湾东南海域方向飞行，并由空中加油机补给油料。台媒提到，",
          link: "环球网",
          time: "2020-10-01 18:00",
          starNum: "342",
          supportNum: "342",
          commentNum: "342",
        },
      ],
      // datePickerValue: "",
      // xData: [],
      // yData: [],
    };
  },
  mounted() {
    // this.initChart();
    // console.log("看看", this.SocialTalkData);
    // this.pageArr = this.SocialTalkData[0] || [];
    // console.log("看看看", this.sTotal);
    this.SocialTalkDataFun();
  },
  watch: {
    SocialTalkData() {
      // console.log("改变了没");
      this.SocialTalkDataFun();
    },
    // SocialTalkData() {
    //   let a = this.SocialTalkData[this.currentPage - 1];
    //   // console.log("哒哒哒大", a);
    //   if (a) {
    //     this.pageArr = a;
    //   } else {
    //     this.pageArr = [];
    //   }
    // },
    // currentPage() {
    //   let a = this.SocialTalkData[this.currentPage - 1];
    //   // console.log("哒哒哒大", a);
    //   if (a) {
    //     this.pageArr = a;
    //   } else {
    //     this.pageArr = [];
    //   }
    // },
  },
  methods: {
    SocialTalkDataFun() {
      //articles: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
      // pageCurrent: 1
      // pageSize: 10
      // total: 100
      // console.log(this.SocialTalkData);
      if (this.SocialTalkData.pageCurrent) {
        this.currentPage = this.SocialTalkData.pageCurrent;
      }
      if (this.SocialTalkData.pageSize) {
        this.sPageSize = this.SocialTalkData.pageSize;
      }
      if (this.SocialTalkData.articles) {
        this.pageArr = this.SocialTalkData.articles;
      }
      this.sTotal = this.SocialTalkData.total || 0;
    },
    clickFun() {
      // console.log("无事发生");
    },
    // 字符串：
    sourceFun(str) {
      let s = JSON.stringify(str);
      return s;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      // 页面数
      sessionStorage.currentPage = val + "";
      // console.log("给我变！");
      this.$emit("getSocialTalkPage", val);
      // this.getSocialTalkData(
      //   localStorage.getItem("bfId"),
      //   "",
      //   this.currentPage
      // );
    },
    // // 社交言论
    // getSocialTalkData(value, accountId, pageNum) {
    //   this.$api.getSocialTalk(value, accountId, pageNum).then((res) => {
    //     console.log("社交言论", res);
    //     this.sTotal = res.total;
    //     this.SocialTalkData = res;
    //     // this.sTotal = res.length || 0;
    //     // this.SocialTalkData = this.pageFun(res, this.sPageSize); //关系图谱数据
    //   });
    // },
    acountNameFun(t) {
      // console.log("ssss222:", t);
      // Facebook
      if (t == "TWITTER") {
        return "Twitter";
      } else if (t == "FACEBOOK") {
        return "Faceboox";
      } else {
        return t;
      }
    },
    // 点击跳转言论详情页
    toTalkDetail(id) {
      // console.log(id);
      localStorage.whereGo = "societyActivity";
      this.$router.push({
        path: `/mainDetail/mtDetail/${id}`,
      });
    },
    // 处理折线图数据
    // setChartData() {
    //   this.getSocialChartData.activityList.map((item, index) => {
    //     this.xData.push(item.year);
    //     this.yData.push(item.number);
    //   });
    // },
    // 折线图时间选择方法
    // changeChooseid(id) {
    //   this.chooseid = id;
    //   console.log(id);
    // },
    // initChart() {
    //   this.myChart = echarts.init(this.$refs.chartCon);
    //   console.log(9999, this.myChart);
    //   this.setChartData();
    //   let option = {
    //     // backgroundColor: "#fff",
    //     title: {
    //       show: false,
    //       text: "",
    //       left: "12%",
    //       top: "13%",
    //       textStyle: {
    //         color: "#999",
    //         fontSize: 14,
    //       },
    //     },
    //     grid: {
    //       left: "6%",
    //       top: "6%",
    //       right: "6%",
    //       bottom: "8%",
    //     },
    //     legend: {
    //       show: false,
    //       icon: "circle",
    //       top: "13%",
    //       itemWidth: 6,
    //       itemHeight: 6,
    //       itemGap: 25,
    //     },
    //     tooltip: {
    //       textStyle: {
    //         color: "#999",
    //       },
    //       trigger: "axis",
    //       backgroundColor: "#ffffff",
    //       extraCssText: "box-shadow: 0px 0px 6px rgba(186, 194, 219, 1);",
    //     },
    //     xAxis: [
    //       {
    //         type: "category",
    //         data: this.xData,
    //         axisLine: {
    //           lineStyle: {
    //             color: "#ddd",
    //           },
    //         },
    //         axisTick: {
    //           show: false,
    //         },
    //         axisLabel: {
    //           interval: 0,
    //           textStyle: {
    //             color: "rgba(0, 0, 0, 0.647)",
    //           },
    //           margin: 15,
    //         },
    //         boundaryGap: false,
    //       },
    //     ],
    //     yAxis: [
    //       {
    //         type: "value",
    //         axisTick: {
    //           show: false,
    //         },
    //         axisLine: {
    //           lineStyle: {
    //             color: "#ddd",
    //           },
    //         },
    //         axisLabel: {
    //           textStyle: {
    //             color: "rgba(0, 0, 0, 0.647)",
    //           },
    //         },
    //         splitLine: {
    //           show: true,
    //           lineStyle: {
    //             type: "dashed",
    //             // color: "#999999"
    //           },
    //         },
    //       },
    //     ],
    //     series: [
    //       {
    //         name: "发布数",
    //         type: "line",
    //         data: this.yData,
    //         symbolSize: 6,
    //         symbol: "circle",
    //         smooth: true,
    //         lineStyle: {
    //           color: "rgba(45, 115, 255, 1)",
    //         },
    //         itemStyle: {
    //           normal: {
    //             color: "rgba(45, 115, 255, 1)",
    //             borderColor: "rgba(45, 115, 255, 1)",
    //           },
    //         },
    //         areaStyle: {
    //           color: "#DCECFF",
    //         },
    //         emphasis: {
    //           itemStyle: {
    //             color: {
    //               type: "radial",
    //               x: 0.5,
    //               y: 0.5,
    //               r: 0.5,
    //               colorStops: [
    //                 {
    //                   offset: 0,
    //                   color: "rgba(45, 115, 255, 1)",
    //                 },
    //                 {
    //                   offset: 0.4,
    //                   color: "rgba(45, 115, 255, 1)",
    //                 },
    //                 {
    //                   offset: 0.5,
    //                   color: "#fff",
    //                 },
    //                 {
    //                   offset: 0.7,
    //                   color: "#fff",
    //                 },
    //                 {
    //                   offset: 0.8,
    //                   color: "#fff",
    //                 },
    //                 {
    //                   offset: 1,
    //                   color: "#fff",
    //                 },
    //               ],
    //             },
    //             borderColor: "rgba(45, 115, 255, 1)",
    //             borderWidth: 2,
    //           },
    //         },
    //       },
    //     ],
    //   };
    //   this.myChart.setOption(option);
    // },
  },
};
</script>
<style>
.page_box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
}
.el-select {
  width: 1.2rem;
  padding: 0;
}
.el-select .el-input {
  height: 0.32rem;
}
.el-input--mini .el-input__inner {
  height: 0.32rem;
  line-height: 0.32rem;
  padding-right: 0.25rem;
  padding-left: 0.05rem;
}
.el-select__caret {
  margin-right: -0.05rem;
  line-height: 0.32rem !important;
}
.el-date-editor {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  width: 3rem !important;
  height: 0.4rem !important;
}
.el-date-editor i {
  line-height: 0.4rem !important;
}
.el-date-editor span {
  line-height: 0.4rem !important;
}
</style>
<style lang="scss" scoped>
.zone-wrap {
  width: 3.86rem;
  height: auto;
  background: white;
  padding: 0.2rem 0.2rem 0.2rem 0.2rem;
  border-width: 0.02rem;
  border-style: solid;
  border-color: rgba(45, 115, 255, 1);
  border-left: 0px;
  border-right: 0px;
  border-bottom: 0px;
}
// .box_list {
//   max-height: 600px;
//   overflow: hidden;
// }
.title-con {
  .icon {
    margin-right: 0.1rem;
    width: 0.04rem;
    height: 0.22rem;
    background-image: url(~@/assets/common/title-item.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .title {
    font-weight: 500;
    font-size: 0.22rem;
    color: rgba(0, 0, 0, 0.847);
  }
}
.data-wrap {
  padding-bottom: 0.1rem;
  border-bottom: dashed 1px #e9e9e9;
  font-size: 0.14rem;
  letter-spacing: 0.01rem;
  color: rgba(0, 0, 0, 0.44);
  line-height: 0.26rem;
  flex-direction: column;
  align-items: unset;
  .data-con {
    margin-left: 0.1rem;
    width: 100%;
    & > div {
      margin-top: 0.2rem;
    }
    .text {
      margin: 0;
      font-weight: 400;
      font-style: normal;
      font-size: 0.18rem;
      letter-spacing: 0.01rem;
      color: rgba(0, 0, 0, 0.647);
      line-height: 0.42rem;
    }
    .tit {
      width: 0.85rem;
      text-align: justify;
      font-weight: 700;
      font-style: normal;
      font-size: 0.18rem;
      letter-spacing: 0.01rem;
      color: rgb(15, 105, 178);
      line-height: 0.42rem;
    }
    .account {
      justify-content: start;

      .logo {
        margin-right: 0.18rem;
        width: 0.7rem;
        min-width: 0.7rem;
        height: 0.7rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border-radius: 8px;
        &.logo-facebook {
          background-image: url(~@/assets/common/facebook.png);
        }
        &.logo-in {
          background-image: url(~@/assets/common/in.png);
        }
        &.logo-twitter {
          background-image: url(~@/assets/common/twitter.png);
        }
        &.logo-faceboox {
          background-image: url(~@/assets/common/facebook.png);
        }
      }
      p {
        text-align: justify;
        height: 0.26rem;
        overflow: hidden;
      }
      .tit {
        margin: 0 0.2rem 0 0;
        // display: inline-block;
        width: 0.62rem;
        min-width: 0.62rem;
        font-weight: 400;
        font-size: 0.14rem;
        letter-spacing: 0.01rem;
        color: #0f69b2;
        line-height: 0.26rem;
        span {
          display: inline-block;
          width: 100%;
          height: 0;
          line-height: 0;
        }
      }
    }
    .bot {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .son {
        // margin-bottom: 0.06rem;
        // margin-right: 0.3rem;
        > img {
          height: 0.24rem;
          margin-right: 0.03rem;
        }
        .collect_img {
          box-sizing: border-box;
          padding: 2px;
          // width: 18px;
          // height: 18px;
        }
      }
      .son + .son {
        margin-left: 0.14rem;
      }
      .line {
        margin: 0 0.1rem;
        width: 1px;
        height: 0.22rem;
        background: rgb(233, 233, 233);
      }
      .icon {
        margin-right: 0.06rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 0.17rem;
        height: 0.17rem;
        &.icon1 {
          background-image: url(~@/assets/common/icon-pl.png);
        }
        &.icon2 {
          background-image: url(~@/assets/common/u486.png);
        }
        &.icon3 {
          background-image: url(~@/assets/common/icon-dz.png);
        }
        // 转发
        &.icon4 {
          background-image: url(~@/assets/common/icon-zf.png);
        }
        &.icon5 {
          background-image: url(~@/assets/common/watch-icon.png);
        }
      }
    }
  }
  .line {
    margin: 0 0.5rem;
    width: 1px;
    height: 1.08rem;
    background: rgb(233, 233, 233);
  }
}
.bottom {
  margin-top: 0.2rem;
  .lef {
    // margin-right: 0.2rem;
    width: 10.37rem;
    min-height: 5.75rem;
    // overflow: hidden;
    .search-wrap {
      input {
        padding-left: 0.1rem;
        display: block;
        width: 1.43rem;
        height: 0.32rem;
        font-weight: 400;
        font-style: normal;
        font-size: 0.14rem;
        color: rgba(0, 0, 0, 0.247058823529412);
        text-align: left;
        line-height: 0.24rem;
        border-width: 1px;
        border-right: 0px;
        border-style: solid;
        border-color: rgba(217, 217, 217, 1);
        border-radius: 0.04rem 0 0 0.04rem;
      }
      .btn {
        width: 0.54rem;
        height: 0.32rem;
        font-weight: 400;
        font-style: normal;
        font-size: 0.14rem;
        color: #ffffff;
        line-height: 0.24rem;
        background-color: rgba(15, 105, 178, 1);
        border: none;
        border-radius: 0.04rem;
      }
    }
    .news-con {
      font-size: 0.14rem;
      font-weight: 400;
      font-style: normal;
      color: rgba(0, 0, 0, 0.6);
      line-height: 0.22rem;
      max-height: 600px;
      overflow: auto;
      .news-item {
        padding-top: 0.15rem;
        padding-bottom: 0.15rem;
        border-bottom: dashed 1px rgb(233, 233, 233);
      }
      .logo {
        margin-right: 0.1rem;
        width: 1.27rem;
        height: 0.89rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .news-text {
        font-size: 14px;
        -webkit-line-clamp: 2;
        width: 8.15rem;
        // height: 39px;
        overflow: hidden;
        line-height: 18px;
        // margin-top: -18px;
        padding-bottom: 16px;
      }
      .news-bottom {
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        box-sizing: border-box;
      }
      .from {
        margin-top: 0.2rem;
        color: rgba(0, 0, 0, 0.44);
        font-weight: 400;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        .link {
          color: #108ee9;
        }
        .time {
          color: rgba(0, 0, 0, 0.247);
        }
      }
      .bot {
        display: none;
        line-height: 1;
        margin-top: 0.15rem;
        .son {
          margin: 0 0.1rem;
        }
        .line {
          margin: 0 0.1rem;
          width: 1px;
          height: 0.22rem;
          background: rgb(233, 233, 233);
        }
        .icon {
          margin-right: 0.06rem;
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          width: 0.14rem;
          height: 0.15rem;
          &.icon1 {
            background-image: url(~@/assets/common/icon-shoucang.png);
          }
          &.icon2 {
            background-image: url(~@/assets/common/icon-dz.png);
          }
          &.icon3 {
            background-image: url(~@/assets/common/icon-pl.png);
          }
          // 转发
          &.icon4 {
            background-image: url(~@/assets/common/icon-zf.png);
          }
          &.icon5 {
            background-image: url(~@/assets/common/watch-icon.png);
          }
        }
      }
    }
  }
  .rig {
    width: 9.31rem;
    min-height: 6.9rem;
    .legends {
      margin-right: 0.1rem;
      line-height: 1;
      .legend {
        width: 0.45rem;
        height: 0.24rem;
        font-weight: 400;
        font-size: 0.14rem;
        color: rgba(0, 0, 0, 0.647);
        &.active {
          background-color: #0f69b2;
          color: rgb(255, 255, 255);
        }
      }
    }
    .sum-num {
      margin-top: 0.08rem;
      height: 0.4rem;
      line-height: 1;
      .tit {
        margin-right: 0.2rem;
        font-size: 0.14rem;
        color: rgba(0, 0, 0, 0.4);
      }
      .desc {
        font-size: 0.24rem;
        color: rgba(0, 0, 0, 0.84);
      }
    }
    .chart-con {
      // margin-top: 0.2rem;
      height: 5.5rem;
    }
  }
}
</style>
